<!--
 * @FileDescription: 登录表单
 * @Author: 叶永鸿、袁年政
 * @Date: 2021-7-17
 * @LastEditors: 叶永鸿
 * @LastEditTime: 2021-7-18
 -->

<template>
  <el-form
    ref="loginForm"
    :model="loginUser"
    :rules="rules"
    label-width="100px"
    class="loginForm sign-in-form"
  >
    

    <el-form-item label="用户名" prop="userName">
      <el-input
        v-model="loginUser.userName"
        placeholder="Enter UserName..."
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="loginUser.password"
        type="password"
        placeholder="Enter Password..."
      ></el-input>
    </el-form-item>

    <el-form-item label="选择身份" prop="role">
      <el-select v-model="loginUser.role" placeholder="请选择身份">
        <el-option label="员工" value="emploee"></el-option>
        <el-option label="hr" value="hr"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button
        @click="handleLogin('loginForm')"
        type="primary"
        class="submit-btn"
        >登录</el-button
      >
    </el-form-item>

    <!-- 找回密码 -->
    <div class="tiparea">
      <p>忘记密码？ <a>立即找回</a></p>
    </div>
  </el-form>
</template>

<script lang="ts">
import { getCurrentInstance, computed } from "vue";
import router from "@/router";
//import axios from "axios";
import { loginUser } from "@/utils/loginValidators";
import { ElMessage } from "element-plus";

import { useStore } from "vuex";
import { LoginState } from "@/store";

export default {
  props: {
    loginUser: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      required: true,
    },
  },
  setup() {
    // @ts-ignore
    const { proxy } = getCurrentInstance();

    const store = useStore<LoginState>();
    const loginInfor = computed(() => store.state.loginInfor);

    const getLoginInfor = computed(() => store.getters.getUserInfor);
    // const getLoginInforStation =computed(()=> store.getters.getUserInforStation)

    // // 触发登录方法
    const handleLogin = (formName: string) => {
      proxy.$refs[formName].validate((valid: boolean) => {
        if (valid) {
          //alert("submit!");
          if (proxy.loginUser.role == "hr") {
            proxy.$axios
              .get(
                "http://47.100.167.206:8082/Login/LoginHR?username=" +
                  proxy.loginUser.userName +
                  "&password=" +
                  proxy.loginUser.password
              )
              .then(
                function (response: any) {
                  //alert("成功接收")
                  console.log(response);
                  if (response.data.message == "successlogin") {
                    //console.log(response);
                    ElMessage.success({
                      message: "登录成功",
                      type: "success",
                    });
                    //console.log(store.getters.getUserInfor);
                    store.commit("login", {
                      userName: proxy.loginUser.userName,
                      station: 2,
                      token: response.headers.token,
                    });
                    // localStorage.setItem(
                    //   "userInfor",
                    //   JSON.stringify(proxy.$store.state.loginInfor)
                    // );
                    console.log(store.getters.getUserInfor.token);
                    console.log(store.getters.getUserInfor.station);
                    router.push("/public");
                  } else {
                    alert("密码或用户名错误，请重新输入");
                  }
                },
                function (err: any) {
                  alert("网络错误，登录失败");
                  console.log(err);
                }
              );
            //alert("ok!");
          } else {
            proxy.$axios
              .get("http://47.100.167.206:8082/Login/LoginEmp", {
                params: {
                  username: proxy.loginUser.userName,
                  password: proxy.loginUser.password,
                },
              })
              .then(
                function (response: any) {
                  //alert("成功接收")
                  console.log(response);
                  if(response.data.message=="successlogin"){
                  store.commit("login", {
                    userName: proxy.loginUser.userName,
                    station: 1,
                    token: response.headers.token,
                  });
                  localStorage.setItem(
                    "userInfor",
                    JSON.stringify(proxy.$store.state.loginInfor)
                  );
                  ElMessage.success({
                    message: "登录成功",
                    type: "success",
                  });
                  console.log(store.getters.getUserInfor.token);
                  console.log(store.getters.getUserInfor.station);

                  router.push("/public");
                  }
                  else {
                    alert("密码或用户名错误，请重新输入");
                  }
                },
                function (err: any) {
                  alert("网络错误，登录失败");
                  console.log(err);
                }
              );
            //alert("ok!");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    return { handleLogin, loginInfor, getLoginInfor };
  },
};
</script>
<style scoped>
/* form */
.loginForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 40px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit-btn {
  width: 100%;
}
.tiparea {
  text-align: right;
  font-size: 12px;
  color: #333;
}
.tiparea p a {
  color: #409eff;
}
</style>